<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="22">
              <el-input
                v-model="listPram.name"
                placeholder="请输入优惠名称"
                clearable
                size="small"
                style="width: 400px;"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  size="small"
                  @click="handlerSearch"
                />
              </el-input>
            </el-col>
            <el-col :span="2">
              <el-button class="text-right" type="primary" @click="addShop">添加优惠</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-table :data="listData.list" style="width: 100%" v-loading="loading">
        <el-table-column
          prop="name"
          label="优惠名称"
        >
        </el-table-column>
        <el-table-column
          label="优惠类型"
        >
        <template slot-scope="scope">
          <span>{{scope.row.discountType == 1 ? '推手优惠':'商品优惠'}}</span>
        </template>
        </el-table-column>
        <el-table-column
          label="打折类型"
        >
        <template slot-scope="scope">
          <span>{{scope.row.discountMethod == 1 ? '折扣':'金额'}}</span>
        </template>
        </el-table-column>
        <el-table-column
          label="优惠"
        >
        <template slot-scope="scope">
          <span>{{scope.row.discountPercent ? scope.row.discountPercent + '%': scope.row.discountAmount + '元'}}</span>
        </template>
        </el-table-column>
        <el-table-column
          prop="commission"
          label="推手佣金"
        >
        <template slot-scope="scope">
          <span>{{scope.row.commission ? scope.row.commission : '-'}}</span>
        </template>
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="优惠截止时间"
        >
        </el-table-column>
        <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
        <el-button type="primary" @click="editShop(scope.row)" size="small">编辑</el-button>
      </template>
    </el-table-column>
      </el-table>
      <el-pagination
        :current-page="listPram.page"
        :page-sizes="constants.page.limit"
        :layout="constants.page.layout"
        :total="listData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog
      :title="editDialogConfig.title"
      :visible.sync="editDialogConfig.visible"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
        @submit.native.prevent
      >
        <el-form-item label="名称：">
          <el-input
            v-model="ruleForm.name"
            maxlength="40"
            placeholder="请输入名称"
            class="dialogWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="简介：">
          <el-input
            v-model="ruleForm.des"
            maxlength="100"
            placeholder="请输入简介"
            class="dialogWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠类型">
          <el-select v-model="listPram.discountType" placeholder="状态" class="selWidth">
            <el-option label="推手优惠" :value="1"></el-option>
            <el-option label="商品优惠" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="打折类型">
          <el-select v-model="listPram.discountMethod" placeholder="状态" class="selWidth">
            <el-option label="折扣" :value="1"></el-option>
            <el-option label="金额" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额/折扣" v-if="listPram.discountMethod">
          <el-input v-if="listPram.discountMethod==1"
            v-model="ruleForm.discountPercent"
            maxlength="100"
            placeholder="折扣百分比"
            class="dialogWidth"
          ><template slot="append">%</template></el-input>
          <el-input v-if="listPram.discountMethod==2"
            v-model="ruleForm.discountAmount"
            maxlength="100"
            placeholder="折扣金额"
            class="dialogWidth"
          ><template slot="append">元</template></el-input>
        </el-form-item>
        <el-form-item label="推手佣金" v-if="listPram.discountTyp==1">
          <el-input
            v-model="ruleForm.commission"
            maxlength="100"
            placeholder="推手佣金"
            class="dialogWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠截止时间:" prop="time">
          <el-date-picker v-model="ruleForm.endTime" type="daterange" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" size="small" placement="bottom-end" placeholder="自定义时间" style="width: 250px;"  />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button
          type="primary"
          @click="editForm('ruleForm')"
          v-if="editDialogConfig.isEdit == 1"
          v-hasPermi="['admin:system:store:update']"
          >修改</el-button
        >
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          v-else
          v-hasPermi="['admin:system:store:save']"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  // updateDiscountt,
  // addDiscountt,
  // getDiscountList,
  // delDiscountt
} from "@/api/hehuoren";
import { Debounce } from "@/utils/validate";
export default {
  name: "shopList",
  data() {
    return {
      constants: this.$constants,
      listPram: {
        name: null,
        page: 1,
        limit: this.$constants.page.limit[0]
      },
      editDialogConfig: {
        visible: false,
        title: "添加优惠",
        isEdit: 0 // 0=add 1=edit
      },
      loading: true,
      listData: { list: [], total: 0 },
      ruleForm: {
        wechat: '',
          name: '',
          introduction: '',
          commission: '',
          discountAmount: '',
          discountMethod: '',
          discountPercent: '',
          discountType: '',
          endTime: '',
          productIds: [],
          sellerUid: ''
      },
    };
  },
  created() {},
  mounted() {
    this.getDiscountListFn();
    this.getProduct()
    this.getSellUser()
  },
  methods: {
    getSellUser() {},
    getProduct() {},
    handleDelete(item) {
      let that = this;
       that.$modalSure('确定要删除该优惠吗？').then(() => {
        delDiscountt(item.id).then(() => {
           that.$message.success('删除成功')
           that.getDiscountListFn();
         })
       })
    },
    addShop() {
      this.editDialogConfig.title = '添加优惠'
      this.editDialogConfig.visible = true
    },
    editShop(item) {
      this.editDialogConfig.title = '编辑优惠'
      this.editDialogConfig.visible = true
      this.ruleForm = JSON.parse(JSON.stringify(item))
    },
    getDiscountListFn() {
      this.loading = true
      getDiscountList(this.listPram).then(res => {
        this.listData = res;
        this.loading = false
      });
    },
    submitForm: Debounce(function(name) {
      addDiscountt(this.ruleForm).then(async () => {
        this.$message.success("提交成功");
        this.editDialogConfig.visible = false;
        this.getDiscountListFn()
      });
    }),
    //编辑
    editForm: Debounce(function(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.handleChange(this.ruleForm.address);
          updateDiscountt(this.ruleForm).then(async () => {
            this.$message.success("编辑成功");
            this.editDialogConfig.visible = false;
            this.getDiscountListFn()
          });
        } else {
          return false;
        }
      });
    }),
    cancel() {
      this.editDialogConfig.visible = false;
      this.ruleForm.image = "";
      this.openTime = ["", ""];
    },
    //查找位置
    onSearch() {
      this.modalMap = true;
    },
    // 选择经纬度
    selectAdderss(data) {
      this.ruleForm.latitude = data.latlng.lat
      this.ruleForm.longitude = data.latlng.lng
      this.modalMap = false;
    },
    // key值
    getKey() {
      const _pram = { id: 74 };
      configInfo(_pram).then(async res => {
        let keys = res.tengxun_map_key;
        this.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`;
      });
    },
    getCityList() {
      logistics
        .cityListTree()
        .then(res => {
          sessionStorage.setItem("cityList", JSON.stringify(res));
          let cityList = JSON.parse(sessionStorage.getItem("cityList"));
          this.addresData = cityList;
        })
        .catch(res => {
          this.$message.error(res.message);
        });
    },
    //上传图片
    modalPicTap(tit) {
      const _this = this;
      this.$modalUpload(
        function(img) {
          _this.ruleForm.image = img[0].sattDir;
        },
        tit,
        "system"
      );
    },
    handleChange(e) {
      let province = e[0];
      let city = e[1];
      let area = e[2];
      if (e.length === 2) {
        this.ruleForm.address = province + "," + city;
      } else if (e.length === 3) {
        this.ruleForm.address = province + "," + city + "," + area;
      }
    },
    //营业时间
    onchangeTime(e) {
      this.ruleForm.openTime = e ? e.join(",") : "";
    },
    handlerSearch() {
      this.listPram.page = 1;
      this.getDiscountListFn(this.listPram);
    },
    handleSizeChange(val) {
      this.listPram.limit = val;
      this.getDiscountListFn(this.listPram);
    },
    handleCurrentChange(val) {
      this.listPram.page = val;
      this.getDiscountListFn(this.listPram);
    }
  }
};
</script>

<style scoped lang="scss">
.el-input-group__append, .el-input-group__prepend{
    background-color:#1890ff!important;
    color: #fff!important;
    border-color:#1890ff!important;
    border-radius: 0 4px 4px 0;
  }
  .cascaderW{
    width: 350px;
  }
  .mapBox{
    text-align: center;
  }

</style>
